<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-20 15:18:54
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-21 18:04:13
 * @FilePath: \shangyitong\src\pages\home\level\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="level">
		<h1>医院</h1>
		<div class="content">
			<div class="left">等级:</div>
			<ul class="hospital">
				<li :class="{ active: activeFlag == '' }">全部</li>
				<li
					v-for="item in levelArr"
					:key="item.value"
					@click="changeLevel(item.value)"
					:class="{ active: activeFlag == item.value }"
				>
					{{ item.name }}
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { reqHospitalLevelAndRegion } from '@/api/home/index'
import type {
	HospitalLevelAndRegionArrResoponse,
	HospitalLevelAndRegionArr,
} from '@/api/home/type'
let levelArr = ref<HospitalLevelAndRegionArr>([])
let $emit = defineEmits(['getLevel'])
//点击等级高亮
let activeFlag = ref('')
//点击等级高亮事件回调
const changeLevel = (level: string) => {
	activeFlag.value = level
	//触发自定义事件,将医院的等级参数回传给父组件
	$emit('getLevel', level)
}
onMounted(() => {
	getLevelAndRegion()
})

const getLevelAndRegion = async () => {
	let result: HospitalLevelAndRegionArrResoponse =
		await reqHospitalLevelAndRegion('HosType')
	if (result.code == 200) {
		levelArr.value = result.data
	}
}
</script>
<script lang="ts">
export default {
	name: 'level',
}
</script>
<style lang="scss" scoped>
.level {
	h1 {
		color: #999994;
	}
	.content {
		display: flex;
		.left {
			margin: 5px 0;
		}
		ul {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			li {
				margin: 0 5px;
				&.active {
					color: #55a6fe;
				}
				&:hover {
					color: #55a6fe;
					cursor: pointer;
				}
			}
		}
	}
}
</style>
